<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>	
	<form class="form-inline"> 
		<div class="btn-group pull-right">
   		<!--<button type="button" class="btn btn-primary" name="hour" id="hour" disabled="disabled">小时</button>-->
   			 <button type="button" class="btn btn-primary" onclick="showDayGraph()" name="day" id="day">日</button>
  		 	 <button type="button" class="btn btn-primary" onclick="showWeekGraph()" name="week" id="week">周</button>
  		 	 <button type="button" class="btn btn-primary" onclick="showMonthGraph()" name="month" id="month">月</button>
		</div>
		<button type="button" class="btn btn-default form-control" onclick="exportData()" >导出</button>
		<div class="input-group">
			<div class="input-group-btn">
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					日期
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a onclick="showGraph60Day()">过去60天</a></li>
					<li><a onclick="showGraph30Day()">过去30天</a></li>
					<li><a onclick="showGraph7Day()">过去7天</a></li>
				</ul>
			</div><!-- /btn-group -->
            <input type="text" id="startId" style="width: 100px" class="form-control" readonly>
			<span class="input-group-addon">--</span>
			<input type="text" id="endId" style="width: 100px" class="form-control" readonly>
		</div>
		<button type="button" class="btn btn-default form-control" onclick="showDateGraph()" >确定</button>

	</form>
	<form id="formExport" action="${basePath}/login/times/export">
		<input type="hidden" name="startDate" id="downStartDate"/>
		<input type="hidden" name="endDate" id="downEndDate"/>
		<input type="hidden" id="productId" name="productId" value="${productId}"/>
	</form>
	<br/>
	<div id="charDiv"></div>
	<script type="text/javascript">
		var url = "${basePath}/login/times/day"
		var data	//图表的数据
		var offset = 28800*1000 //java 的Date与javascript的Date的偏移量       <--  disabled="disabled"-->
		var xAxleList //图表x轴刻度
		var sendData	//ajax传输的数据
		var productId = $("#productId").val();
		//导出数据
		function exportData(){
			var startDate = $("#startId").val();
			var endDate = $("#endId").val();
			$("#downStartDate").val(startDate);
			$("#downEndDate").val(endDate);
			$("#formExport").submit();
		}
		//按天显示
		function showDayGraph(){
			url = "${basePath}/login/times/day"
			$('#day').attr("class","btn btn-primary active");
			$('#week').attr("class","btn btn-primary");
			$('#month').attr("class","btn btn-primary");
			var startDate = $("#startId").val();
			var endDate = $("#endId").val();
			sendData ={
					"startDate":startDate,
					"endDate":endDate,
					"productId":productId,
				}
			showGraph();
		}
		//按周显示
		function showWeekGraph(){
			url = "${basePath}/login/times/week"
			$('#day').attr("class","btn btn-primary");
			$('#week').attr("class","btn btn-primary active");
			$('#month').attr("class","btn btn-primary");
			var startDate = $("#startId").val();
			var endDate = $("#endId").val();
			sendData ={
					"startDate":startDate,
					"endDate":endDate,
					"productId":productId,
				}
			showGraph();
		}
		//按月显示
		function showMonthGraph(){
			url = "${basePath}/login/times/month"
			$('#day').attr("class","btn btn-primary");
			$('#week').attr("class","btn btn-primary");
			$('#month').attr("class","btn btn-primary active");
			var startDate = $("#startId").val();
			var endDate = $("#endId").val();
			sendData ={
					"startDate":startDate,
					"endDate":endDate,
					"productId":productId,
				}
			showGraph();
		}
		//自定义日期的图
		function showDateGraph(){
			var startDate = $("#startId").val();
			var endDate = $("#endId").val();
			var dayNum = (Date.parse(endDate)-Date.parse(startDate))/(24*60*60*1000)+1;
			if(dayNum==1){
				$('#hour').removeAttr("disabled");
				$('#week').attr("disabled","disabled");
				$('#month').attr("disabled","disabled");
			}else if(dayNum<=7){
				$('#hour').attr("disabled","disabled");
				$('#week').attr("disabled","disabled");
				$('#month').attr("disabled","disabled");
			}else if(dayNum<=30){
				$('#hour').attr("disabled","disabled");
				$('#week').removeAttr("disabled");
				$('#month').attr("disabled","disabled");
			}else if(dayNum<=365){
				$('#hour').attr("disabled","disabled");
				$('#week').removeAttr("disabled");
				$('#month').removeAttr("disabled");
				$('#day').attr("class","btn btn-primary");
				$('#week').attr("class","btn btn-primary active");
				$('#month').attr("class","btn btn-primary");
			 	url = "${basePath}/login/times/week"//周
			}else{
				$('#hour').attr("disabled","disabled");
				$('#week').removeAttr("disabled");
				$('#month').removeAttr("disabled");
				$('#day').attr("class","btn btn-primary");
				$('#week').attr("class","btn btn-primary");
				$('#month').attr("class","btn btn-primary active");
				url = "${basePath}/login/times/month"// 月
			}
			sendData ={
				"startDate":startDate,
				"endDate":endDate,
				"productId":productId,
			}
			showGraph();
		}
		//60天前的图
		function showGraph60Day(){
			sendData ={
				"dayNum":-60,
				"productId":productId,
			}
			$('#month').removeAttr("disabled");
			$('#week').removeAttr("disabled");
			$('#day').attr("class","btn btn-primary");
			$('#week').attr("class","btn btn-primary active");
			$('#month').attr("class","btn btn-primary");
		 	url = "${basePath}/login/times/week"//周
			getBeforeDate(60);
			showGraph();
		}
		//30天前的图
		function showGraph30Day(){
			sendData ={
				"dayNum":-30,
				"productId":productId,
			}
			$('#week').removeAttr("disabled");
			getBeforeDate(30);
			showGraph();
		}
		//7天前的图
		function showGraph7Day(){
			sendData ={
				"dayNum":-7,
				"productId":productId,
			}
			getBeforeDate(7);
			showGraph();
		}
		$(function() {
			$('#day').attr("class","btn btn-primary active");
			$('#week').attr("disabled","disabled");
			$('#month').attr("disabled","disabled");
			getBeforeDate(7);
			sendData ={
					"productId":productId,
				}
			showGraph();
			})
			//ajax post提交
		function showGraph() {
			$.post(url,sendData,function(backData){
					//alert(backData.result.dataList);
				if(backData.result.success){
					data = backData.result.object.dataList;
					xAxleList = backData.result.object.xAxleList;
					graph();
				}else{
					$('#charDiv').html(backData.result.message)
				}
				});
			}
		//曲线图
		function graph() {
			$('#charDiv')
					.highcharts(
							{
								title : {
									text : '启动次数统计',
									x : -20	//center
								},
								//subtitle : {
								//	text : '信息来源: lich.com',
								//	x : -20
							//	},
								xAxis : {
									title : {
										text : '日期'
									},
									categories: xAxleList,
									tickmarkPlacement :'between',// 'on',//'between',
									labels: {
										formatter: function() {
											return Highcharts.dateFormat('%m-%d',this.value+offset);
										}
									}
								},
								yAxis : {
									title : {
										text : '启动次数(次)'
									},
									plotLines : [ {
										value : 0,
										width : 1,
										color : '#808080'
									} ]
								},
								plotOptions: {
						            series: {
						                marker: {
						                    radius: 4,  //曲线点半径，默认是4
						                    symbol: 'circle' //曲线点类型："circle", //"square", "diamond", "triangle","triangle-down"，默认是"circle"
						                }
						            }
						        },
								tooltip : {	//数据点提示
									formatter: function () {   
			                            return Highcharts.dateFormat('%Y-%m-%d',this.x+offset)+':' + this.y+'次';    
			                        } 
								},
								credits: {
									enabled:false
								},
								legend : {
									enabled: false,//true,//false,
								},
								series : [
										{
											//name : '值',
											data :	data,
										} ]
							});
		}
		//获取n天前的日期
		function getBeforeDate(n){
		    var enddate = laydate.now(0,'YYYY.MM.DD');
			var startdate = laydate.now(-n+1,'YYYY.MM.DD');
			$("#startId").val(startdate);
			$("#endId").val(enddate);
		}
		//开始日期
		var start = {
			    elem: '#startId',
			    format: 'YYYY.MM.DD',
			    min: '2000-01-01', //设定最小日期为当前日期
			    max: laydate.now(), //最大日期
			    istime: false,
			    istoday: false,
			    isclear: false, //是否显示清空
			    issure: false, //是否显示确认
			    choose: function(datas){
			         end.min = datas; //开始日选好后，重置结束日的最小日期
			         end.start = datas //将结束日的初始值设定为开始日
			    }
			};
		//结束日期
			var end = {
			    elem: '#endId',
			    format: 'YYYY.MM.DD',
			    min: laydate.now(-6),
			    max: laydate.now(),
			    istime: false,
			    istoday: false,
			  	isclear: false, //是否显示清空
			    issure: false, //是否显示确认
			    choose: function(datas){
			    	//alert(datas);
			        start.max = datas; //结束日选好后，重置开始日的最大日期
			    }
			};
			laydate(start);
			laydate(end);
/*
$(function () {
    $('#charDiv').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '用户登录次数统计 2016-08-30'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['1次',   15],
                ['2~3次',       11],
                {
                    name: '3~5次',
                    y: 5,
                    sliced: true,
                    selected: true
                },
                ['大于5次',   2]
            ]
        }]
    });
});*/
	</script>
	
</body>

</html>